import Icon from '@/components/Icon';
import getComponentDom from './getComponentDom.js';
import style from './showMessage.module.less';

/**
 * 根据配置弹出一个消息框
 * @param {*} options 配置弹出消息
 * @param {*} options.type 弹出消息类型
 * @param {*} options.wrap 弹出消息的容器
 * @param {*} options.content 弹出消息的文本
 * @param {*} options.duration 弹出消息消失的时间
 * 
 */
export default function showMessage(options) {
    // 初始化参数
    let wrap = options.wrap || document.body; // 容器元素
    let content = options.content || '提示信息'; // 显示的文字
    let type = options.type || 'info'; // 显示的图标
    let duration = options.duration || 500; // 显示的持续时间

    // 创建元素
    let div = document.createElement('div');
    let icon = getComponentDom(Icon, {
        type
    });
    let span = document.createElement('span');

    // 添加元素
    div.append(icon);
    div.append(span);
    wrap.append(div);

    // 设置元素内容
    span.innerHTML = content;

    // 判断父元素是否符合标准
    if (getComputedStyle(wrap).position === 'static') {
        wrap.style.position = 'relative';
    }

    // 添加样式
    let bgc = style[`showMessage-${type}`]
    div.className = `${style.showMessage} ${bgc}`

    // 强制刷新浏览器
    div.clientHeight;

    // 设置过渡样式
    div.style.transform = `translate(-50%, -50%)`;
    div.style.opacity = '1';

    // 一段时间过后消失
    setTimeout(() => {
        div.style.transform = `translate(-50%, -50%) translateY(-25px)`;
        div.style.opacity = '0';
        div.addEventListener('transitionend', () => {
            div.remove();
        }, {
            once: true
        })
    }, duration)

}